<template>
  <div class="page">
    <div class="context">
      <div class="title_1" style="cursor: pointer" @click.stop="handleShowCfgGrade">
        <div>消费等级</div>
        <div style="padding: 5px 0 0 0">
          <el-tooltip content="累计消费级别" placement="top">
            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
              <circle cx="10" cy="10" r="8" fill="none" stroke="#724eff" stroke-width="1" />
              <text x="10" y="14" font-size="12" text-anchor="middle" fill="#724eff">i</text>
            </svg>
          </el-tooltip>
        </div>
        <div>
          <i v-if="clerkGrade.popMe" class="el-icon-arrow-down"></i>
          <i v-else class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div v-if="clerkGrade.popMe" class="title_1_ctx2">
        <table class="act_info">
          <tr>
            <td colspan="4">
              <i v-if="clerkGrade.dataLoading" class="el-icon-loading"></i>
              <el-alert
                v-else-if="clerkGrade.isUpdating"
                :title="clerkGrade.alertUpdating"
                type="warning"
                :closable="false"
                show-icon></el-alert>
              <el-alert v-else :title="clerkGrade.alertDefault" type="warning" :closable="false" show-icon></el-alert>
            </td>
          </tr>
          <tr>
            <td>
              <div class="title_1_ctx1">
                <div class="title_2">
                  <div class="title_icon"></div>
                  <div class="title_name">C级</div>
                </div>
                <div class="title_1_ctx1_1">
                  <el-input-number
                    v-model="clerkGrade.grade.c"
                    :precision="0"
                    :step="100"
                    :max="9999999"
                    :min="1"
                    :disabled="clerkGrade.dataLoading || clerkGrade.isUpdating"></el-input-number>
                </div>
              </div>
            </td>
            <td>
              <div class="title_1_ctx1">
                <div class="title_2">
                  <div class="title_icon"></div>
                  <div class="title_name">B级</div>
                </div>
                <div class="title_1_ctx1_1">
                  <el-input-number
                    v-model="clerkGrade.grade.b"
                    :precision="0"
                    :step="100"
                    :max="99999999"
                    :min="2"
                    :disabled="clerkGrade.dataLoading || clerkGrade.isUpdating"></el-input-number>
                </div>
              </div>
            </td>
            <td>
              <div class="title_1_ctx1">
                <div class="title_2">
                  <div class="title_icon"></div>
                  <div class="title_name">A级</div>
                </div>
                <div class="title_1_ctx1_1">
                  <el-input-number
                    v-model="clerkGrade.grade.a"
                    :precision="0"
                    :step="100"
                    :max="999999999"
                    :min="3"
                    :disabled="clerkGrade.dataLoading || clerkGrade.isUpdating"></el-input-number>
                </div>
              </div>
            </td>
            <td>
              <div class="title_1_ctx1">
                <div class="title_2">
                  <div class="title_icon"></div>
                  <div class="title_name">S级</div>
                </div>
                <div class="title_1_ctx1_1">
                  <el-input-number
                    v-model="clerkGrade.grade.s"
                    :precision="0"
                    :step="100"
                    :max="99999999999"
                    :min="4"
                    :disabled="clerkGrade.dataLoading || clerkGrade.isUpdating"></el-input-number>
                </div>
              </div>
            </td>
            <td style="vertical-align: bottom">
              <el-button v-if="clerkGrade.isUpdating" type="primary" icon="el-icon-loading" disabled>
                确认修改
              </el-button>
              <el-button v-else type="primary" @click.stop="goUpdateGradeCfg">确认修改</el-button>
            </td>
          </tr>
        </table>
        <!--END 消费等级-->
      </div>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
import * as cfgApi from '@/api/cfg_clerk_grade';
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

export default {
  name: 'SimpleCfg',
  components: {},
  data() {
    return {
      // 顾客标签筛选区域
      clerkGrade: {
        popMe: false,
        dataLoading: false,
        isUpdating: false,
        grade: { c: 0, b: 0, a: 0, s: 0 },
        alertDefault:
          '修改消费等级配置, 会同步地更新所有顾客的消费等级, 这可能比较耗时(与顾客数量有关), 最好在本页面等待后台更新完成',
        alertUpdating: '后台正在更新顾客的消费等级, 现在不能修改',
      },
    };
  },
  computed: {
    ...mapGetters(['name', 'id', 'deptId', 'openId']),
  },
  mounted() {},
  methods: {
    handleShowCfgGrade() {
      if (this.clerkGrade.dataLoading) {
        return;
      }
      this.clerkGrade.popMe = !this.clerkGrade.popMe;
      if (this.clerkGrade.popMe) {
        this.loadClerkGradeCfg();
      }
    },
    loadClerkGradeCfg: async function () {
      if (!this.openId) {
        return;
      }
      if (this.clerkGrade.dataLoading) {
        return;
      }
      this.clerkGrade.dataLoading = true;
      const errAlertMsg = '查询消费等级配置失败';
      await cfgApi
        .get(this.openId)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            if (ret.isUpdating) {
              this.clerkGrade.isUpdating = true;
            } else {
              this.clerkGrade.isUpdating = false;
            }
            if (ret.cfg) {
              this.clerkGrade.grade.s = ret.cfg.s;
              this.clerkGrade.grade.a = ret.cfg.a;
              this.clerkGrade.grade.b = ret.cfg.b;
              this.clerkGrade.grade.c = ret.cfg.c;
            }
          }
        })
        .catch(e => {
          console.log('loadClerkGradeCfg', e);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.clerkGrade.dataLoading = false;
        });
    },
    goUpdateGradeCfg: async function () {
      if (!this.openId) {
        return;
      }
      if (this.clerkGrade.grade.b < this.clerkGrade.grade.c) {
        MessageBox.alert('B级的累消金额必须大于C级');
        return;
      }
      if (this.clerkGrade.grade.a < this.clerkGrade.grade.b) {
        MessageBox.alert('A级的累消金额必须大于B级');
        return;
      }
      if (this.clerkGrade.grade.s < this.clerkGrade.grade.a) {
        MessageBox.alert('S级的累消金额必须大于A级');
        return;
      }
      if (this.clerkGrade.isUpdating) {
        return;
      }
      this.clerkGrade.isUpdating = true;
      const errAlertMsg = '更新消费等级配置失败';
      this.clerkGrade.grade.sid = this.openId;
      const params = Object.assign({}, this.clerkGrade.grade);
      params.sid = this.openId;
      await cfgApi
        .update(params)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
        })
        .catch(e => {
          console.log('goUpdateGradeCfg', e);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.clerkGrade.isUpdating = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
$font-family: 思源黑体 微软雅黑 Noto Sans SC-Medium;
$title-width: 100px;
$tag-height: 17px;
$tag-line-height: 17px;

::v-deep .el-table td {
  padding: 5px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}

.page {
  position: relative;
  width: 100%;
  height: 1920px;
  padding: 5px 10px 0 10px;
  font-family: $font-family;
  background-color: #f8f8fa;
  border-radius: 0px 0px 0px 0px;

  .context {
    width: 100%;
    padding: 5px 10px 0 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
  }

  .title_1 {
    font-family: $font-family;
    font-size: 20px;
    font-weight: bold;
    line-height: 22px;
    letter-spacing: 0px;
    font-variation-settings: 'opsz' auto;
    color: #724eff;
    letter-spacing: 1px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .title_1_ctx1 {
    width: 100%;
    padding: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;

    .title_1_ctx1_1 {
      display: block;
      text-align: left;

      .act_times {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .title_1_ctx1 tr {
    margin-top: 5px;
  }

  .title_1_ctx2 {
    width: 100%;
    padding: 0px 0px 0px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
  }

  .title_2 {
    width: $title-width;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;

    .title_icon {
      width: 4px;
      height: 13px;
      background: #766aff;
      background-position: left bottom;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .title_name {
      font-family: $font-family;
      font-size: 16px;
      font-weight: 550;
      line-height: 22px;
      letter-spacing: 0px;
      font-variation-settings: 'opsz' auto;
      color: #333333;
      letter-spacing: 1px;

      .no_flex {
        display: inline;
        margin-left: 15px;
      }
    }
  }
}

.act_info td {
  width: 35%;
  vertical-align: top;
  border-right: 20px solid transparent; /*单元格右侧边框为20像素透明色*/
}
</style>
